<template>
	 <view class="content" :style="{'padding-top':'calc(' + statusBarHeight+'px' + ')',backgroundImage: 'url('+inviteBgc+')',height:HH+'px',width:WW+'px'}">
		<uni-nav-bar  :border="false" left-icon="left" v-if="!backgroundColor" backgroundColor="transparent"  @clickLeft="back" class="nav" :style="{top:'calc(' + statusBarHeight+'px' + '20rpx)',}"> </uni-nav-bar>
		<uni-nav-bar  :border="false" left-icon="left" v-else backgroundColor="#fbdfd9"  @clickLeft="back" class="nav" :style="{top:'calc(' + statusBarHeight+'px' + '20rpx)',}"> </uni-nav-bar>
	     
		 
		 <view class="name_info">
			<view class="flex_row_center_center">
				 <image src="../../static/images/other/life.png" mode="widthFix" class="life_img"></image>
			</view>
			<view class="flex_row_center_center life_form">
				 <image src="../../static/images/other/life_border.png" mode="widthFix" class="life_border"></image>
				 <view class="life_form_info">
					 <view class="flex_row_start_center homeInfo_popup_item">
					 	<view class="homeInfo_popup_left">姓名：</view>
					 	 <input v-model="form.name" placeholder="请输入姓名" placeholder-class="placeholder-class" />
					 </view>
					 <view class="flex_row_start_center homeInfo_popup_item">
					 	<view class="homeInfo_popup_left">性别：</view>
					 
						<radio-group @change="radioChange">
							<view class="flex_row_start_center">
								<label v-for="(item, index) in radioList" :key="item.value" >
									<view class="flex_row_start_center"  style="margin-right: 24rpx;">
										<view class="radioHidden">
											<radio :value="item.value" :checked="index == current" style="transform:scale(0.5) " />
										</view>
										<view> {{item.name}}</view>
									</view>
								</label>
							</view>
						</radio-group>
					 </view>
					 <view class="flex_row_start_start homeInfo_popup_item">
					 	<view class="homeInfo_popup_left">出生时辰：</view>
					 	<!-- <view>公历1999年06月15日12：00</view> -->
						<view >
							<view class="flex_row_start_center">
								<button class="cu-btn sm " :class="form.isLeap == '' ? 'bg-brown' :''" style="margin-right: 20rpx;" @click="getIsleap(1)">阳历</button>
								<button class="cu-btn sm"  :class="(form.isLeap == 'true' || form.isLeap == 'false') ? 'bg-brown' :''" @click="getIsleap(2)">阴历</button>
							    <view v-if="form.isLeap == 'true' || form.isLeap == 'false'">
									<checkbox-group class="uni-list" @change="checkboxChange">
											<label class="uni-list-cell uni-list-cell-pd" >
												<view class="flex_row_start_center">
													<checkbox :value="true" :checked="ischecked"  style="transform:scale(0.5)"></checkbox>
													<view>闰月</view>
												</view>
											</label>
									</checkbox-group>
								</view>
							</view>
							<pickerTime :timeStrs="form.time"   @pickTime="pickTimeChange"></pickerTime>
						</view> 
					 </view>
					 <view class="flex_row_start_center homeInfo_popup_item">
					 	<view class="homeInfo_popup_left">出生地点：</view>
					    <view><Region :regionStrs="form.selectAddress" @region="resgclick" /></view>
					 </view> 
				 </view>
			</view>
			<view class="flex_row_center_center" @click="natTo('/pages/lifeExplanation/lifedetail')">
				<view class="life_button">开始排盘</view>
			</view>
		 </view>
		 <loginPop ref="loginPop" ></loginPop>
	    </view>
</template>

<script>
    import uQRCode from '@/utils/uqrcode.js'
	import Region from '@/components/picker-address/picker-address.vue'
	import pickerTime from '@/components/picker-times/picker-times.vue';
	import {mapState,mapMutations } from 'vuex'

    export default {
		components:{Region,pickerTime},
        data() {
            return {
                imgUrl: getApp().globalData.imgUrl,
                HH: getApp().globalData.windowHeight,
                WW: getApp().globalData.screenWidth,
				statusBarHeight:getApp().globalData.statusBarHeight,
				inviteBgc:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/yj/life.png',
				backgroundColor:false,
				list:['音律优美','意境优美','智慧','安康','自信'],
				form:{
					name:null,
					year:null,
					month:null,
					day:null,
					hour:null,
					minute:null,
					time:null,
					selectAddress:null,
					selectAddressCode:null,
					gender:null,
					isLeap:''
				},
				
				 
				 current:0,
				 radioList:[
					 {
						 value:'0',
						 name:'男'
					 },
					 {
						 value:'1',
						 name:'女'
					 },
				 ],
				 ischecked:false,
				
            }
        },
        onLoad(options) {
			  // console.log(options.type);
			  if(options.type){
				  this.getMingZhu()
			  }else{
				  this.form.time='请选择'
				  this.current='0'
				  this.form.gender=this.current=='0' ? '男':'女'
			  }
        },
        onShow() {
			
        },
		computed: {
			...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onPageScroll(e) {
			// console.log(e);
			if(e.scrollTop>30){
				this.backgroundColor=true
				
			}else{
				this.backgroundColor=false
			}
		},
        methods: {
			getIsleap(value){
				if(value==1){
					this.form.isLeap=''
				}else if(value==2){
					this.form.isLeap='false'
				}
				
					console.log(this.form.isLeap);
			},
			checkboxChange(e){
				
				if(e.detail.value[0]){
					this.form.isLeap='true'
				}else{
					this.form.isLeap='false'
				}
				console.log(this.form.isLeap);
			},
			back(){
				uni.navigateBack()
			},
			natTo(url){
				if(!this.hasLogin){
					this.$refs.loginPop.openLogin()
					return false
				}
				// 要传递的对象参数
				const obj = this.form
				
				// 将对象参数转为JSON字符串，并使用encodeURIComponent编码
				const params = encodeURIComponent(JSON.stringify(obj));
				
				// 跳转页面并传递对象参数
				uni.navigateTo({
				   url: `${url}?params=${params}`
				});
				
			},
			getMingZhu(){
				let param = {};
				param.url='v3/member/front/master/detail'
				this.$request(param).then(res =>{
					// console.log(res);
					this.mingZhuInfo=res.data
					this.form.name=res.data.masterName
					this.form.selectAddress=res.data.masterAddress
					this.form.selectAddressCode=res.data.masterAddressCode
					this.form.gender=res.data.masterSex
					this.form.isLeap=res.data.isLeap
					if(this.form.isLeap==''){
						this.ischecked=false
					}else if(this.form.isLeap=='false'){
						this.ischecked=false
					}else if(this.form.isLeap =='true'){
						this.ischecked=true
					}
					
					console.log(this.form.selectAddress);
					let time=res.data.masterBirthday.split(' ')
					
					this.form.year=time[0].split('/')[0]
					this.form.month=time[0].split('/')[1]
					this.form.day=time[0].split('/')[2]
					this.form.hour=time[1].split(':')[0]
					this.form.minute=time[1].split(':')[1]
					this.form.time=res.data.masterBirthday
					// this.form.time='公历'+this.form.year+'年'+this.form.month+'月'+this.form.day+'日'+' '+this.form.hour+'时'+this.form.minute+'分'
				    this.current=this.form.gender=='男' ? '0':'1'
					
					
				})
			},
			radioChange(value){
				this.current=value.detail.value
				this.form.gender=this.current=='0' ? '男':'女'
				// console.log(this.form.gender);
			},
			resgclick(value){
				this.form.selectAddress=value[0].name+value[1].name+value[2].name
				this.form.selectAddressCode=value[2].code
			},
			pickTimeChange(value){
				// this.form.masterBirthday=value
				// console.log(value);
				let time=value.split(' ')
				this.form.year=time[0].split('/')[0]
				this.form.month=time[0].split('/')[1]
				this.form.day=time[0].split('/')[2]
				this.form.hour=time[1].split(':')[0]
				this.form.minute=time[1].split(':')[1]
				this.form.time=value
				// this.form.time='公历'+this.form.year+'年'+this.form.month+'月'+this.form.day+'日'+' '+this.form.hour+'时'+this.form.minute+'分'
				// console.log('value',value);
			},


        }
    }
</script>
<style>
	
	 
</style>

<style lang="scss">
  page{
    background-color: #eee5d2;
	// padding-bottom: 30rpx;
  }
  
  .nav{
	  position: fixed;
	  left: 0;
	  width: 750rpx;
	  z-index: 999;
  }

   .content {
        background-size: 100% auto; //背景图片能够显
        background-repeat: no-repeat;
        position: relative;
    }
	
	.name_info{
		position: fixed;
		left: 48rpx;
		right: 48rpx;
		bottom: 120rpx;
		width: 654rpx;
		// background-color: #fff;
		
		.life_img{
			width: 490rpx;
			height: 180rpx;
		}
		.life_border{
			width: 654rpx;
			height: 654rpx;
		}
		
		.life_form{
			position: relative;
			
			
			.life_form_info{
				position: absolute;
				left: 86rpx;
				top: 98rpx;
				
				.homeInfo_popup_item{
					margin-bottom: 15rpx;
					font-size: 28rpx;
				}
				.homeInfo_popup_left{
					width: 144rpx;
					height: 30rpx;
				}
			}
		}
		
		.life_button{
			width: 580rpx;
			height: 104rpx;
		    border-radius: 8rpx;
			background: #9e4035;
			color: #FFFFFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 104rpx;
			margin-top: 62rpx;
		}
	}
	

	
	
	
	
    
</style>